<!-- 动态信息 -->
<template>
  <el-drawer
    title="动态信息"
    custom-class="global-dynamic-info-drawer"
    :visible="visible"
    :modal="false"
    :before-close="handleClose"
  >
    <div class="global-dynamic-info-drawer__title" slot="title">
      <b>{{$t('task.detail.components.dynamicUpdate')}}</b>
      <span class="color-primary just-cur-point" @click="viewMore">{{$t('common.base.more')}}</span>
    </div>
    <div class="global-dynamic-info__list">
        <dept-records
          v-if="user && visible"
          :detail-id="user.userId"
          :display-name="user.displayName"
          :is-from-user-view="true"
          :is-show-filter="false"
        >
        </dept-records>
    </div>
  </el-drawer>
</template>
<script>
import { defineComponent } from 'vue';
import { openTab } from '@src/platform';

import DeptRecords from '@src/modules/dept/deptHome/components/DeptRecords.vue';

import { PageRoutesTypeEnum } from 'pub-bbx-global/pageType/dist/enum/PageRoutesEnum';
import { openAccurateTab } from '@src/util/platform';

export default defineComponent({
  name: 'DynamicInfoDrawer',
  components: {
    DeptRecords,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    user: {
      type: Object,
      default: null,
    },
  },
  emits: ['update:visible'],
  setup(props, { emit }) {
    /**
     * 关闭抽屉
     */

    function handleClose() {
      emit('update:visible', false);
    }

    /**
     * 查看更多
     */
    function viewMore() {
      handleClose();

      let fromId = window.frameElement?.getAttribute('id');
      openAccurateTab({
        type: PageRoutesTypeEnum.PageMineView,
        key: props.user?.userId || '',
        fromId
      })
    }

    return {
      handleClose,
      viewMore,
    };
  },
});
</script>
<style lang="scss">
.global-dynamic-info-drawer {
  // position: absolute;
  top: $frame-header-height !important;
  bottom: 0 !important;
  height: initial !important;
  width: 400px !important;

  .el-drawer__header {
    padding: 0 16px;
    height: 40px;
    display: flex;
    align-items: center;
    i {
      color: #383838;
    }
  }

  .global-dynamic-info-drawer__title {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: $text-color-primary;
  }

  .el-drawer__close-btn {
    font-size: 16px;
    margin-left: 24px;
  }

  .global-dynamic-info__list {
    overflow: auto;
    height: 100%;
    .progress-content {
      padding: 0;
    }
  }
}
</style>
